<template>
  <div class="course-page">
    <div class="course-type-bar">
      <button
        v-for="item in courseTypes"
        :key="item.value"
        :class="['type-btn', { active: selectedType === item.value }]"
        @click="selectedType = item.value"
      >{{ item.label }}</button>
    </div>
    <div class="course-title">{{ currentCourse.name }}课程</div>
    <div class="course-modules">
      <div v-for="mod in modules" :key="mod.title" class="course-module">
        <div class="module-title">{{ mod.title }}</div>
        <div class="module-content">{{ mod.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 课程基类
class CourseBase {
  constructor(name) {
    this.name = name
  }
  getModules() {
    return []
  }
}

// 瑜伽课程
class YogaCourse extends CourseBase {
  constructor() {
    super('瑜伽')
  }
  getModules() {
    return [
      { title: '课程视频', content: '瑜伽全套视频教学' },
      { title: '动作指导', content: '体式分解与动作要领' },
      { title: '呼吸方法', content: '瑜伽呼吸法讲解' }
    ]
  }
}

// 普拉提课程
class PilatesCourse extends CourseBase {
  constructor() {
    super('普拉提')
  }
  getModules() {
    return [
      { title: '课程视频', content: '普拉提基础与进阶视频' },
      { title: '动作指导', content: '核心激活与动作分解' },
      { title: '呼吸方法', content: '普拉提呼吸技巧' }
    ]
  }
}

// 力量训练课程
class StrengthCourse extends CourseBase {
  constructor() {
    super('力量训练')
  }
  getModules() {
    return [
      { title: '训练计划', content: '分部位力量训练计划' },
      { title: '器械教学', content: '哑铃/杠铃/自身体重等器械使用' },
      { title: '发力要点', content: '肌肉发力与动作标准' }
    ]
  }
}

// 有氧运动课程
class CardioCourse extends CourseBase {
  constructor() {
    super('有氧运动')
  }
  getModules() {
    return [
      { title: '课程视频', content: '有氧操/跑步/跳绳等视频' },
      { title: '动作指导', content: '有氧运动动作分解' },
      { title: '呼吸方法', content: '有氧运动呼吸节奏' }
    ]
  }
}

// 课程工厂
class CourseFactory {
  static createCourse(type) {
    switch (type) {
      case 'yoga':
        return new YogaCourse()
      case 'pilates':
        return new PilatesCourse()
      case 'strength':
        return new StrengthCourse()
      case 'cardio':
        return new CardioCourse()
      // 新增课程类型只需在此添加
      default:
        return new CourseBase('未知课程')
    }
  }
}

const courseTypes = [
  { label: '瑜伽', value: 'yoga' },
  { label: '普拉提', value: 'pilates' },
  { label: '力量训练', value: 'strength' },
  { label: '有氧运动', value: 'cardio' }
]

const selectedType = ref('yoga')
const currentCourse = computed(() => CourseFactory.createCourse(selectedType.value))
const modules = computed(() => currentCourse.value.getModules())
</script>

<style scoped>
.course-page {
  padding: 32px 0 0 0;
}
.course-type-bar {
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
}
.type-btn {
  padding: 8px 22px;
  border: none;
  border-radius: 18px;
  background: #f2f2f2;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.type-btn.active {
  background: #00b96b;
  color: #fff;
  font-weight: 700;
}
.course-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: #222;
}
.course-modules {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.course-module {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 18px 22px;
}
.module-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #00b96b;
}
.module-content {
  font-size: 1rem;
  color: #444;
}
</style> 